<template>
  <!--食品详情  -->
  <div class="ele-food" ref="wrapper">
    <div class="ele-food-wrapper">
      <div class="ele-food-img">
        <div class="ele-back iconfont elehuitui" @click="closeWindow"></div>
        <img :src="food.image" alt="" @load="load" />
      </div>
      <div class="ele-food-common bottom-border">
        <div class="ele-food-title">
          {{ food.name }}
        </div>
        <div class="ele-sell-item">
          <span class="ele-sell-count">月售{{ food.sellCount }}份</span>
          <span class="ele-sell-rating">好评率{{ food.rating }}%</span>
        </div>
        <div class="ele-goods-price">
          <span class="ele-price-text"
            ><span class="money-char">￥</span>{{ food.price }}</span
          >
          <del class="ele-proce-oldText" v-if="food.oldPrice"
            >￥{{ food.oldPrice }}</del
          >
          <ele-select-button
            :count="Count"
            @countChange="countChange"
          ></ele-select-button>
        </div>
      </div>
      <div class="ele-food-common bottom-border">
        <div class="ele-food-title">商品信息</div>
        <div class="evaluate-text">
          <p>
            {{ food.info && food.info.length > 0 ? food.info : "暂无信息" }}
          </p>
        </div>
      </div>
      <!-- 评价按钮操作 -->

      <ele-filter
        :isCheck="isCheck"
        :btnIndex="btnIndex"
        :btnList="btnList"
        @handlerBtnClick="handlerBtnClick"
        @radioCheck="radioCheck"
      ></ele-filter>
      <!-- 评价列表 -->
      <div class="ele-evaluate-list">
        <div class="ele-evaluate-item" v-for="(value, index) in ratings">
          <div class="evaluate-content">
            <div class="publish-date">
              <span>{{ value.rateTime | dateFormDate }}</span>
            </div>
            <div class="publish-text">
              <ele-commend-icon :value="value.rateType" />
              <span class="text">{{ value.text }}</span>
            </div>
          </div>
          <div class="evalute-user">
            <span class="evaluate-username">
              {{ value.username }}
            </span>
            <span class="header-img">
              <img :src="value.avatar" alt="" />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 初始化betterScroll
import { _InitScroll } from "@/common/js/better-scroll";
// 公用工具类
import { commonUtils } from "@/common/js/utils";
// 日期格式化
import Format from "@/common/js/dateFormat";
// 评价过滤组件
import eleFilter from "./evaluate_filter";
// 评价图标组件
import eleCommendIcon from "./commend_icon";
// select 添加购物车按钮
import eleSelectButton from "./select_Button";
// Vuex
import { mapActions } from "vuex";
export default {
  props: {
    // 食品列表
    food: {},
  },
  mixins: [commonUtils],
  data() {
    return {
      // betterScroll 实例
      scroll: {},
      // 过滤的按钮 信息
      btnList: [
        { text: "全部", key: -1 },
        { text: "好评", key: 0 },
        { text: "差评", key: 1 },
        { text: "推荐", key: 2 },
      ],
      // 当前按钮下标
      btnIndex: -1,
      // 是否选中只看有文本的评价
      isCheck: false,
    };
  },
  methods: {
    ...mapActions(["changeOrderlist"]),
    // 关闭窗户
    closeWindow() {
      this.$emit("closeWindow");
    },
    // 刷新betterScroll
    load() {
      this.scroll.refresh();
    },
    // 点击事件，通过index判断当前点击
    handlerBtnClick(index) {
      this.btnIndex = index;
    },
    // 改变radio按钮状态
    radioCheck(v) {
      this.isCheck = v;
    },
    // 保存数据到购物车
    countChange(count) {
      this.Count = count;
    },
  },
  filters: {
    // 日期格式化
    dateFormDate(time) {
      let date = Format("YYYY-mm-dd HH:MM", new Date(time));
      return date;
    },
  },
  computed: {
    // 评价过滤
    ratings() {
      let _res = this.__FilterDate(
        this.food.ratings,
        this.btnIndex,
        this.isCheck
      );
      return _res;
    },
    // 商品计数
    Count: {
      get() {
        let _res = {};
        let { food } = this;
        this.$store.getters.getOrderList.forEach((Item) => {
          Item.name === food.name ? (_res = Item) : "";
        });
        return _res.count||0;
      },
      set(count) {
         let { food } = this;
          this.changeOrderlist({
          name: food.name,
          singlePrice: food.price,
          count: count,
        });
      },
    },
  },
  mounted() {
    this.__InitWrapper(this.$refs.wrapper)
    this.scroll = new _InitScroll(this.$refs.wrapper);
  },
  components: {
    // 用户评价过滤，按钮组件
    eleFilter,
    // 用户评价图标，点赞 踩
    eleCommendIcon,
    // 购物车
    eleSelectButton,
  },
};
</script>
<style scoped>
.ele-food {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: white;
}
.ele-food-wrapper{
  padding-bottom: 48px;
}
.ele-back {
  top: 6px;
  left: 6px;
  padding: 5px 5px;
  font-size: 20px;
  color: white;
  cursor: pointer;
  position: absolute;
  border-radius: 50%;
  background-color: rgba(7, 17, 27, 0.1);
}
.ele-food-common {
  padding: 18px 18px;
  position: relative;
  margin-bottom: 16px;
}
.bottom-border::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 0;
  height: 16px;
  width: 100%;
  border-top: rgba(7, 17, 27, 0.1) 1px solid;
  border-bottom: rgba(7, 17, 27, 0.1) 1px solid;
  background-color: #f3f5f7;
}
.ele-food-img {
  height: 375px;
  width: 100%;
  background-color: #e57373;
}
.ele-food-img img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.ele-food-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: rgb(7, 17, 27);
}
.ele-proce-oldText {
  margin-left: 12px;
}
.ele-sell-item {
  margin-bottom: 18px;
}
.evaluate-text {
  line-height: 24px;
  padding: 0 8px;
  font-size: 12px;
  color: #4d555d;
}
.ele-evaluate-list {
  border-top: 1px solid rgba(7, 17, 27, 0.1);
}

.ele-evaluate-item {
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
}
.publish-date {
  font-size: 10px;
  color: rgb(147, 153, 159);
}
.ele-goods-price {
  position: relative;
}

.publish-text .text {
  font-size: 12px;
  color: rgb(7, 17, 27);
  line-height: 16px;
  margin-left: 4px;
}
.evaluate-username {
  color: rgb(147, 153, 159);
  font-size: 10px;
  line-height: 12px;
}
.header-img {
  display: inline-block;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  overflow: hidden;
}
.header-img img {
  height: 100%;
  width: 100%;
}
</style>
